<script setup lang="ts">
import type { Defect } from '@/index.d';
import { dayjs } from 'element-plus';
const props = defineProps({
  title: String,
  defectList: Array<Defect>
});
const isAfter = (date1: string, date2: string) => dayjs(date1).isAfter(dayjs(date2));

const value = computed(() => {
  switch (props.title) {
    case '累计发现缺陷长度（毫米）': {
      let len = 0;
      props.defectList?.forEach(item => {
        len += item.defectSize as number;
      });
      return len;
    }

    case '本月新增缺陷长度（毫米）': {
      let len = 0;
      props.defectList
        ?.filter(item => {
          const now = new Date();
          const year = now.getFullYear();
          const month = now.getMonth() + 1 >= 10 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`;
          return item.testDate!.includes(year + '-' + month);
        })
        .forEach(item => {
          len += item.defectSize as number;
        });
      return len;
    }

    case '累计发现不合格工件': {
      const temParts: Array<string> = [];
      props.defectList?.forEach(item => {
        const str = item.productionReference + '' + item.partReference;
        if (!temParts.includes(str)) temParts.push(str);
      });
      return temParts.length;
    }

    case '本月新增不合格工件': {
      const currentMonthdefectList: Array<Defect> = [];

      props.defectList?.forEach(item => {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1 >= 10 ? now.getMonth() + 1 : `0${now.getMonth() + 1}`;
        if (item.testDate!.includes(year + '-' + month)) {
          currentMonthdefectList.push(item);
        }
      });

      const temParts: Array<string> = [];
      currentMonthdefectList.forEach(item => {
        const str = item.productionReference + '' + item.partReference;
        if (!temParts.includes(str)) temParts.push(str);
      });
      return temParts.length;
    }

    case '累计无缺陷天数': {
      let latestDate: string | undefined = undefined;
      props.defectList?.forEach(item => {
        if (latestDate === undefined || isAfter(item.testDate as string, latestDate)) {
          latestDate = item.testDate;
        }
      });
      return dayjs().diff(dayjs(latestDate), 'day');
    }

    default:
      return 10;
  }
});
</script>
<template>
  <div class="statistic-container">
    <div class="statistic-container-header">
      <slot name="title">{{ props.title }} </slot>
    </div>
    <div class="statistic-container-content">
      <slot>{{ value }} </slot>
    </div>
  </div>
</template>
<style scoped lang="scss">
.statistic-container {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  &:hover {
    background-color: rgb(204, 211, 204);
  }
  .statistic-container-header {
    height: 80px;
    line-height: 80px;
    font-size: 1rem;
    text-align: center;
  }
  .statistic-container-content {
    flex: 1;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bolder;
    color: red;
  }
}
</style>
